<template>
    <div class="fanListBox">
        <div class="header" :style="tabsData !== $t('recommend') ? 'height: 8.2rem;' : 'height: 5.2rem;'">
            <div class="headerBox">
                <div class="returnBtn" @click="hendleReturnBtn">
                    <up-icon name="arrow-left" bold size="20"></up-icon>
                </div>
                <div class="commentBox">
                    <u-sticky>
                        <u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list1"
                            :current="current" @click="tabsClick"></u-tabs>
                    </u-sticky>
                </div>
            </div>
            <div class="inputText" v-if="tabsData !== $t('recommend')">
                <u-input v-model="inputData" clearable confirm-type="search" :placeholder="$t('Searchusername')"
                    prefixIcon="search" prefixIconStyle="font-size: 22px;color: #fff" color="#ffffff"
                    disabledColor="#CABFC2" placeholder-style="color:#fff" :disabled="tabsData == $t('recommend')"
                    @confirm="submitContent"></u-input>
            </div>
            <div class="title">
                <div class="text" v-if="tabsData == $t('attention')">{{ $t('myattention') }}
                    <!-- <span>({{ userTotal }})</span> -->
                </div>
                <div class="text" v-else-if="tabsData == $t('fans')">{{ $t('myfans') }}
                    <!-- <span>({{ userTotal }})</span> -->
                </div>
                <div class="text" v-else-if="tabsData == $t('recommend')">{{ $t('Someoneyoumightbeinterestedin') }}
                </div>
                <div class="select" v-if="tabsData == $t('attention')">
                    <up-select v-model:current="cateId1" :label="cateName1" :options="cateList1"
                        @select="selectItem"></up-select>
                </div>
                <span v-else>&nbsp;</span>
            </div>
        </div>
        <div :style="tabsData !== $t('recommend') ? 'width: 100%;height: 9.2rem;' : 'width: 100%;height: 6.2rem;'">
        </div>
        <div class="bodyBox"
            :style="tabsData !== $t('recommend') ? 'height: calc(100% - 8.2rem - 1rem);' : 'height: calc(100% - 6.2rem);'">
            <div class="window1" v-if="tabsData === $t('attention')">
                <view class="u-page">
                    <up-list @scrolltolower="scrolltolower">
                        <up-list-item v-for="(item, index) in indexList" :key="index">
                            <up-cell :title="item.user_name">
                                <template #icon>
                                    <!-- <up-avatar shape="square" size="35" :src="item.url"
                                        customStyle="margin: -3px 5px -3px 0">
                                    </up-avatar> -->
                                    <div class="img" @tap="shezhiBtn(item)">
                                        <image :src="item.avatar_sign" alt="" />
                                    </div>
                                </template>
                                <template #right-icon>
                                    <!-- <span class="gzBtn" v-if="item.if_follow">
                                        <up-button size="small" @tap.stop="handleButtonClick($event, item, index)"
                                            :loading="btnLoading" :loadingText="$t('attention')">
                                            {{ $t('attention') }}
                                        </up-button>
                                    </span> -->
                                    <span class="ygzBtnBox">
                                        <up-button class="ygzBtn" size="small"
                                            @tap.stop="handleButtonClick2($event, item, index,)">
                                            {{ $t('havepaidattention') }}
                                        </up-button>
                                    </span>
                                </template>
                            </up-cell>
                        </up-list-item>
                    </up-list>
                </view>
            </div>
            <div class="window1" v-if="tabsData === $t('fans')">
                <view class="u-page">
                    <up-list @scrolltolower="scrolltolower">
                        <up-list-item v-for="(item, index) in indexList2" :key="index">
                            <up-cell :title="item.user_name">
                                <template #icon>
                                    <!-- <up-avatar shape="square" size="35" :src="item.url"
                                        customStyle="margin: -3px 5px -3px 0">
                                    </up-avatar> -->
                                    <div class="img" @tap="shezhiBtn(item)">
                                        <image :src="item.avatar_sign" alt="" />
                                    </div>
                                </template>
                                <template #right-icon>
                                    <span class="gzBtn" v-if="!item.i_am_following">
                                        <up-button size="small" @tap.stop="handleButtonClick($event, item, index)"
                                            :loading="btnLoading" :loadingText="$t('backtotheoff')">
                                            {{ $t('backtotheoff') }}
                                        </up-button>
                                    </span>
                                    <span class="ygzBtnBox" v-else>
                                        <up-button class="ygzBtn" size="small"
                                            @tap.stop="handleButtonClick2($event, item, index)">
                                            {{ $t('payattentiontoeachother') }}
                                        </up-button>
                                    </span>
                                </template>
                            </up-cell>
                        </up-list-item>
                    </up-list>
                </view>
            </div>
            <div class="window1" v-if="tabsData === $t('recommend')">
                <view class="u-page">
                    <up-list @scrolltolower="scrolltolower">
                        <up-list-item v-for="(item, index) in indexList3" :key="index">
                            <up-cell :title="item.user_name">
                                <template #icon>
                                    <!-- <up-avatar shape="square" size="35" :src="item.url"
                                        customStyle="margin: -3px 5px -3px 0">
                                    </up-avatar> -->
                                    <div class="img" @tap="shezhiBtn(item)">
                                        <image :src="item.avatar_sign" alt="" />
                                    </div>
                                </template>
                                <template #right-icon>
                                    <span class="gzBtn" v-if="!item.if_follow">
                                        <up-button size="small" @tap.stop="handleButtonClick($event, item, index)"
                                            :loading="btnLoading" :loadingText="$t('attention')">
                                            {{ $t('attention') }}
                                        </up-button>
                                    </span>
                                    <span class="ygzBtnBox" v-else>
                                        <up-button class="ygzBtn" size="small"
                                            @tap.stop="handleButtonClick2($event, item, index)">
                                            {{ $t('havepaidattention') }}
                                        </up-button>
                                    </span>
                                </template>
                            </up-cell>
                        </up-list-item>
                    </up-list>
                </view>
            </div>
        </div>
        <upModal :modalShow="modalShow" :modalTitle="''" :modalText1="modalText1" :showImage="true" :isCancel="true"
            @cancel="cancel" @cloos="cloos"></upModal>
    </div>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive, watch } from 'vue'
import upModal from '../../components/upModal.vue';
import { attentionAndNot } from '@/api/index/index.js'
import { followGZ, followTJ, followFS } from '@/api/meApi/me.js'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const modalShow = ref(false)
const modalText1 = ref('')
const list1 = reactive([{ name: t('attention') }, { name: t('fans') }, { name: t('recommend') }])
const tabsData = ref(t('attention'))
const btnLoading = ref(false)
const inputData = ref('')
const userTotal = ref(999)
const current = ref(0)
const page = ref(1)
const cateId1 = ref('')
const cateName1 = ref(t('beenfollowing'))
const cateList1 = reactive([
    {
        id: '1',
        name: t('beenfollowing')
    },
    {
        id: '2',
        name: t('Theearliestattention')
    },
])
let indexList = ref([]);
let indexList2 = ref([]);
let indexList3 = ref([]);
// 列表点击
const shezhiBtn = (item: any) => {
    uni.navigateTo({
        url: '/pages/me/userHomepage?' + 'data=' + item.user_code,
    })
}
// 下拉触底事件
const scrolltolower = () => {
    // console.log('触底事件');
    page.value++
    if (current.value == 0) {
        getGZ()
    } else if (current.value == 1) {
        getFS()
    } else {
        getTJ()
    }
};

const selectItem = (item: any) => {// 排序选择
    if (item.name) {
        cateName1.value = item.name
    }
}
// 监听 cateName1 的变化
watch(cateName1, (newValue: string, oldValue: string) => {
    if (newValue !== oldValue) {
        indexList.value.reverse()
    }
}, { immediate: true })
const tabsClick = (item: any, index: number) => {// 点击标签
    indexList.value = []
    indexList2.value = []
    indexList3.value = []
    tabsData.value = item.name;
    current.value = index;
    page.value = 1
    inputData.value = ''
    if (index == 0) {
        getGZ()
    } else if (index == 1) {
        getFS()
    } else {
        getTJ()
    }
}
const getGZ = () => {
    followGZ({ current: page.value, fansName: inputData.value }).then((res: object) => {
        if (res.code == 200) {
            indexList.value.push(...res.data)
            if (cateName1.value == t('Theearliestattention')) {
                indexList.value.reverse()
            }
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.msg}`,
            icon: 'none',
            duration: 2000
        })
    })
}
const getFS = () => {
    followFS({ current: page.value, fansName: inputData.value }).then((res: object) => {
        if (res.code == 200) {
            indexList2.value.push(...res.data)
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.msg}`,
            icon: 'none',
            duration: 2000
        })
    })
}
const getTJ = () => {
    followTJ(page.value).then((res: object) => {
        if (res.code == 200) {
            indexList3.value.push(...res.data)
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.msg}`,
            icon: 'none',
            duration: 2000
        })
    })
}
// 查询事件
const submitContent = () => {
    page.value = 1
    indexList.value = []
    indexList2.value = []
    indexList3.value = []
    if (current.value == 0) {
        getGZ()
    } else if (current.value == 1) {
        getFS()
    } else {
        getTJ()
    }
}
const hendleReturnBtn = () => {
    uni.navigateBack()
}
// 关注
const handleButtonClick = (event: any, item: any, index: number) => {
    // event.stopPropagation(); // 阻止事件冒泡
    // let ifGZData = !item.if_follow
    let ifGZData = false
    if (tabsData.value == t('fans')) {// 粉丝页与其他页面的关注状态有区别
        ifGZData = !item.i_am_following
    } else {
        ifGZData = !item.if_follow
    }
    let para = {
        followUserCode: item.user_code,
        isFollow: ifGZData
    }
    btnLoading.value = true
    attentionAndNot(para).then((res: object) => {
        if (res.code == 200) {
            uni.showToast({
                title: t('Focusonsuccess'),
                icon: 'success',
                duration: 2000
            })
            if (tabsData.value == t('fans')) {
                item.i_am_following = true
            } else {
                item.if_follow = true
            }
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'error',
                duration: 2000
            })
            if (tabsData.value == t('fans')) {
                item.i_am_following = false
            } else {
                item.if_follow = false
            }
        }
    }).finally(() => {
        btnLoading.value = false
    })
}
let itemData = ref({})
// 取消关注
const handleButtonClick2 = (event: any, item: any, index: number) => {
    event.stopPropagation(); // 阻止事件冒泡
    itemData.value = item
    // if (item.if_follow) {
    modalText1.value = t('Doyouwanttocancelattention')
    modalShow.value = true
    // }
}
const cancel = () => {
    modalShow.value = false
}
// 弹窗确认按钮
const cloos = () => {// 确认后，取消关注
    let para = {
        followUserCode: itemData.value.user_code,
        isFollow: false
    }
    attentionAndNot(para).then((res: object) => {
        if (res.code == 200) {
            // uni.showToast({
            //     title: `取消关注成功!`,
            //     icon: 'success',
            //     duration: 2000
            // })
            if (tabsData.value == t('fans')) {
                itemData.value.i_am_following = false
            } else {
                itemData.value.if_follow = false
            }
            if (tabsData.value == t('attention')) {
                indexList.value = []
                getGZ()
            }
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'error',
                duration: 2000
            })
            if (tabsData.value == t('fans')) {
                itemData.value.i_am_following = true
            } else {
                itemData.value.if_follow = true
            }
        }
        modalShow.value = false
    })
}
onLoad((options: object) => {
    tabsData.value = options.forget;
    current.value = options.num;
    if (current.value == 0) {
        getGZ()
    } else if (current.value == 1) {
        getFS()
    }
});
</script>
<style scoped lang="scss">
.fanListBox {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-y: auto;

    .header {
        width: 100%;
        height: 7.2rem;
        // background-color: #f5f5f5;
        position: fixed;
        top: 0;
        z-index: 9999;
        padding-top: 1rem;

        .headerBox {
            width: 100%;
            display: flex;
            align-items: center;

            .returnBtn {
                margin-left: 15rpx;
                // margin-top: 1rem;
            }

            .commentBox {
                width: 100%;

                ::v-deep .u-tabs {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .inputText {
            width: 98%;
            margin: 0 auto;
            margin-top: 10rpx;

            ::v-deep .u-input {
                border-radius: 15px;
                background-color: #9998987c;
            }
        }

        .title {
            width: 100%;
            margin-top: 10rpx;
            font-size: 0.88rem;

            .text {
                margin-left: 20rpx;
                display: inline-block;
            }

            .select {
                // width: 44%;
                margin-right: 10rpx;
                padding: 10rpx 20rpx;
                border: 1rpx solid #BBBBBB;
                border-radius: 15rpx;
                // display: inline-block;
                float: right;
                background-color: #fff;
                font-size: 28rpx;

                ::v-deep .u-select__text {
                    font-size: 0.88rem;
                }
            }
        }
    }

    .bodyBox {
        width: 100%;
        height: calc(100% - 8.2rem - 1rem);

        .window1 {
            width: 100%;
            height: 100%;

            .u-page {
                width: 100%;
                height: 100%;

                ::v-deep .u-list {
                    width: 100%;
                    height: 100% !important;

                    .u-cell__body {
                        padding: 5rpx 30rpx !important;
                    }

                    .u-cell__title-text {
                        font-size: 24rpx;
                        font-weight: bold;
                    }

                    .u-list-item {
                        border-top: 1rpx solid #C1BDBE;
                        border-bottom: 1rpx solid #C1BDBE;
                    }
                }

                .ygzBtnBox {
                    .u-button {
                        width: 4.25rem;
                    }
                }

                .gzBtn {
                    .u-button {
                        width: 4.5rem;
                        background-color: #de868f;
                        color: #fff;
                    }
                }

                .img {
                    width: 100rpx;
                    height: 100rpx;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}
</style>